<template>
  <div>
    <Header></Header>
    <div class="c_border">
      <h2>{{blog.title}}</h2>
      <div>
        <el-link class="c_link" v-show="isShowEditBtn">
          <!-- 路由跳转 编辑页面 -->
          <router-link :to="{name:'BlogEdit',params:{'blogId':blog.id}}" class="c_router_link">
            编辑
            <i class="el-icon-edit"></i>
          </router-link>
        </el-link>
        <el-link @click="removeBlog(blog.id)" v-show="isShowEditBtn">
          删除
          <i class="el-icon-delete"></i>
        </el-link>
      </div>
      <el-divider></el-divider>
      <div class="markdown-body" v-html="blog.content"></div>
    </div>
  </div>
</template>
<script>
// 引入 其他组件
import Header from "../components/Header";
// 导入 markdown css
import "github-markdown-css";
export default {
  name: "BlogDetail",
  data() {
    return {
      blog: {
        id: "",
        title: "",
        description: "",
        content: "",
      },
      isShowEditBtn: false,
    };
  },
  components: { Header },
  created() {
    // 从请求路径中获取 blogId
    const bId = this.$route.params.blogId;
    // bid有值为 编辑操作
    if (bId) {
      // 根据id 获取 blog信息
      var _this = this;
      _this.$axios.get("/blog/" + bId).then((res) => {
        _this.blog.id = res.data.data.id;
        _this.blog.title = res.data.data.title;
        _this.blog.description = res.data.data.description;
        // 渲染 内容
        var markdownIt = require("markdown-it");
        var md = new markdownIt();
        var result = md.render(res.data.data.content);
        _this.blog.content = result;

        // 判断当前登录用户id 是否 当前编辑博客的id
        // 获取 用户
        var uid = JSON.parse(sessionStorage.getItem("userInfo")).id;
        _this.isShowEditBtn = uid && uid == res.data.data.userId;
      });
    }
  },
  computed: {},
  methods: {
    // 根据id删除blog
    removeBlog(bid) {
      const _this = this;
      // 确认框
      _this
        .$confirm("此操作将永久删除该博客, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          _this.$axios
            .delete("/blog/" + bid, {
              headers: {
                Authorization: localStorage.getItem("token"),
              },
            })
            .then((res) => {
              _this.$alert(res.data.msg, "提示，即将返回列表页面", {
                confirmButtonText: "确定",
                showClose: false,
                callback: (action) => {
                  // 跳转到 列表
                  _this.$router.push("/blogs");
                },
              });
            });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style  scoped>
.c_border {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 1000px;
  overflow: hidden;
  padding: 20px 10px;
}
.c_router_link {
  text-decoration: none;
  color: black;
  margin: 0px 10px;
}
</style>
